/*----------------------------------------*\
  NAVY
\*----------------------------------------*/

.navy {
  position: relative;
  perspective: 1200px;
  height: 100%;

  & li > a:not(.navy__back),
  & li > span:not(.navy__title),
  & li > button {
    @apply menu__item menu__item--small;
    @apply menu__item--border w-full;
    @apply xl:px-3 xl:py-3;
    @apply bg-white;

    &.active::after {
      content: '';
      @apply block bg-primary-500;
      @apply w-[3px];
      @apply absolute top-0 bottom-0 left-0;
    }

    &.desktop-menu__more {
      @apply hidden lg:block;
    }
  }

  & .main-navigation--mobile li > a {
    @apply bg-white hover:bg-secondary-50 focus:bg-secondary-50;
  }

  & .meta-navigation--mobile li > a {
    @apply bg-secondary-50 hover:bg-secondary-100 focus:bg-secondary-100;
  }

  & .top-bar-navigation--mobile li > a {
    @apply bg-secondary-500 hover:bg-secondary-700 focus:bg-secondary-700;
    @apply text-white hover:text-white focus:text-white;
    @apply border-secondary-300;
  }
}

.navy__has-children {
  @apply flex flex-row;
  @apply items-start justify-between;

  & .icon {
    @apply h-5 w-5;
  }
}

.navy__back {
  @apply menu__action-btn;
  @apply lg:absolute lg:-top-12 lg:-left-5;
  @apply xl:-top-14 3xl:-top-16;
  @apply justify-start !important;

  & .icon {
    @apply lg:h-5 lg:w-5;
  }

  .navy__level-0 & {
    @apply block lg:hidden;
  }
}

.navy__title {
  @apply menu__item menu__item--title;
  @apply font-bold;
  @apply border-opacity-0;
}

.navy__level-0 {
  @apply bg-secondary-500 lg:bg-white;
}

.navy__level-0,
.navy__level-1,
.navy__level-2,
.navy__level-3,
.navy__level-4,
.navy__level-5,
.navy__level-6,
.navy__level-7 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  /*
  remark: adapt displayRelatedSubmenu function in
  Navy.js if the 600ms duration is modified:
  */
  transform: translateX(0%);
  transition: transform 600ms ease-in-out, opacity 600ms ease-in-out;
}

/* Slide positions */

.show-level-0 {
  .navy__level-0 {
    transform: translateX(0%);
    opacity: 1;
  }
  .navy__level-1,
  .navy__level-2,
  .navy__level-3,
  .navy__level-4,
  .navy__level-5,
  .navy__level-6,
  .navy__level-7 {
    transform: translateX(100%);
    opacity: 0;
  }
}

.show-level-1 {
  .navy__level-0 {
    transform: translateX(-100%);
    opacity: 0;
  }
  .navy__level-1 {
    transform: translateX(0%);
    opacity: 1;
  }
  .navy__level-2,
  .navy__level-3,
  .navy__level-4,
  .navy__level-5,
  .navy__level-6,
  .navy__level-7 {
    transform: translateX(100%);
    opacity: 0;
  }
}

.show-level-2 {
  .navy__level-0,
  .navy__level-1 {
    transform: translateX(-100%);
    opacity: 0;
  }
  .navy__level-2 {
    transform: translateX(0%);
    opacity: 1;
  }
  .navy__level-3,
  .navy__level-4,
  .navy__level-5,
  .navy__level-6,
  .navy__level-7 {
    transform: translateX(100%);
    opacity: 0;
  }
}

.show-level-3 {
  .navy__level-0,
  .navy__level-1,
  .navy__level-2 {
    transform: translateX(-100%);
    opacity: 0;
  }
  .navy__level-3 {
    transform: translateX(0%);
    opacity: 1;
  }
  .navy__level-4,
  .navy__level-5,
  .navy__level-6,
  .navy__level-7 {
    transform: translateX(100%);
    opacity: 0;
  }
}

.show-level-4 {
  .navy__level-0,
  .navy__level-1,
  .navy__level-2,
  .navy__level-3 {
    transform: translateX(-100%);
    opacity: 0;
  }
  .navy__level-4 {
    transform: translateX(0%);
    opacity: 1;
  }
  .navy__level-5,
  .navy__level-6,
  .navy__level-7 {
    transform: translateX(100%);
    opacity: 0;
  }
}

.show-level-5 {
  .navy__level-0,
  .navy__level-1,
  .navy__level-2,
  .navy__level-3,
  .navy__level-4 {
    transform: translateX(-100%);
    opacity: 0;
  }
  .navy__level-5 {
    transform: translateX(0%);
    opacity: 1;
  }
  .navy__level-6,
  .navy__level-7 {
    transform: translateX(100%);
    opacity: 0;
  }
}

.show-level-6 {
  .navy__level-0,
  .navy__level-1,
  .navy__level-2,
  .navy__level-3,
  .navy__level-4,
  .navy__level-5 {
    transform: translateX(-100%);
    opacity: 0;
  }
  .navy__level-6 {
    transform: translateX(0%);
    opacity: 1;
  }
  .navy__level-7 {
    transform: translateX(100%);
    opacity: 0;
  }
}

.show-level-7 {
  .navy__level-0,
  .navy__level-1,
  .navy__level-2,
  .navy__level-3,
  .navy__level-4,
  .navy__level-5,
  .navy__level-6 {
    transform: translateX(-100%);
    opacity: 0;
  }
  .navy__level-7 {
    transform: translateX(0%);
    opacity: 1;
  }
}

/* ul background colors on mobile */

.mobile-menu {
  .navy__level-0 ul:nth-of-type(2) a {
    @apply menu__item--grey;
  }

  .navy__level-0 ul:nth-of-type(3) a {
    @apply menu__item--negative;
  }
}

.mobile-menu-navigation-bar {
  @apply border-b relative z-40;
  @apply xs:px-5 md:px-10 lg:hidden;
}
